$(function() {
	Highcharts.theme = {
        colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5',
            '#64E572', '#FF9655', '#FFF263', '#6AF9C4'
        ],
        chart: {
            backgroundColor: {
                linearGradient: {
                    x1: 0,
                    y1: 0,
                    x2: 1,
                    y2: 1
                },
                stops: [
                    [0, 'rgb(255, 255, 255)'],
                    [1, 'rgb(240, 240, 255)']
                ]
            },
            borderWidth: 2,
            plotBackgroundColor: 'rgba(255, 255, 255, .9)',
            plotShadow: true,
            plotBorderWidth: 1
        },
        title: {
            style: {
                color: '#000',
                font: 'bold 16px "Trebuchet MS", Verdana, sans-serif'
            }
        },
        subtitle: {
            style: {
                color: '#666666',
                font: 'bold 12px "Trebuchet MS", Verdana, sans-serif'
            }
        },
        xAxis: {
            gridLineWidth: 1,
            lineColor: '#000',
            tickColor: '#000',
            labels: {
                style: {
                    color: '#000',
                    font: '11px Trebuchet MS, Verdana, sans-serif'
                }
            },
            title: {
                style: {
                    color: '#333',
                    fontWeight: 'bold',
                    fontSize: '12px',
                    fontFamily: 'Trebuchet MS, Verdana, sans-serif'
                }
            }
        },
        yAxis: {
            minorTickInterval: 'auto',
            lineColor: '#000',
            lineWidth: 1,
            tickWidth: 1,
            tickColor: '#000',
            labels: {
                style: {
                    color: '#000',
                    font: '11px Trebuchet MS, Verdana, sans-serif'
                }
            },
            title: {
                style: {
                    color: '#333',
                    fontWeight: 'bold',
                    fontSize: '12px',
                    fontFamily: 'Trebuchet MS, Verdana, sans-serif'
                }
            }
        },
        legend: {
            itemStyle: {
                font: '9pt Trebuchet MS, Verdana, sans-serif',
                color: 'black'
            },
            itemHoverStyle: {
                color: '#039'
            },
            itemHiddenStyle: {
                color: 'gray'
            }
        },
        labels: {
            style: {
                color: '#99b'
            }
        },
        navigation: {
            buttonOptions: {
                theme: {
                    stroke: '#CCCCCC'
                }
            }
        }
    };
    // Apply the theme 
    var highchartsOptions = Highcharts.setOptions(Highcharts.theme);
	
    var param = {
        chart: {
            type: 'columnrange',
            inverted: true
        },
        title: {
            text: '接口耗时详情'
        },
        // subtitle: {
        //     text: 'Observed in Vik i Sogn, Norway, 2009'
        // },
        xAxis: {
            categories: [
                '总耗时', 
                'com.lvmama.dashboard.service.ajax.search.ILogSearchService.searchLog(AjaxRequestBody<LogSearchRequest>)', 
                'com.lvmama.dashboard.service.ajax.search.ILogSearchService.searchLog(AjaxRequestBody<LogSearchRequest>)', 
                'com.lvmama.dashboard.service.ajax.search.ILogSearchService.searchLog(AjaxRequestBody<LogSearchRequest>)', 
                'com.lvmama.dashboard.service.ajax.search.ILogSearchService.searchLog(AjaxRequestBody<LogSearchRequest>)', 
                'com.lvmama.dashboard.service.ajax.search.ILogSearchService.searchLog(AjaxRequestBody<LogSearchRequest>)',
                'com.lvmama.dashboard.service.ajax.search.ILogSearchService.searchLog(AjaxRequestBody<LogSearchRequest>)', 
                'com.lvmama.dashboard.service.ajax.search.ILogSearchService.searchLog(AjaxRequestBody<LogSearchRequest>)', 
                'com.lvmama.dashboard.service.ajax.search.ILogSearchService.searchLog(AjaxRequestBody<LogSearchRequest>)', 
                'com.lvmama.dashboard.service.ajax.search.ILogSearchService.searchLog(AjaxRequestBody<LogSearchRequest>)', 
                'com.lvmama.dashboard.service.ajax.search.ILogSearchService.searchLog(AjaxRequestBody<LogSearchRequest>)', 
                'com.lvmama.dashboard.service.ajax.search.ILogSearchService.searchLog(AjaxRequestBody<LogSearchRequest>)'
            ]
        },
        yAxis: {
            title: {
                text: '单接口耗时(ms)'
            }
        },
        tooltip: {
            valueSuffix: 'ms'
        },
        plotOptions: {
            columnrange: {
                dataLabels: {
                    enabled: true,
                    formatter: function() {
                        return this.y + 'ms';
                    }
                }
            }
        },
        legend: {
            enabled: false
        },
        series: [{
            name: '单接口耗时',
            data: [
                [0, 4030],
                [31, 100],
                [109, 300],
                [500, 750],
                [800, 980],
                [1000, 1099],
                [1100, 1500],
                [1600, 1900],
                [2000, 2200],
                [2230, 2800],
                [2900, 3500],
                [3569, 4000]
            ]
        }]
    }

    $('#log_time_detail_0').highcharts(param);


    $('#log_time_detail_0').css({display:'none', visibility:'hidden'});
    $('#total_time_li_0').click(function() {
        var disvalue = $("#log_time_detail_0").css("display");
        if('none' == disvalue) {
            $('#log_time_detail_0').css({display:'block', visibility:'visible'});
        } else {
            $('#log_time_detail_0').css({display:'none', visibility:'hidden'});
        }
        console.log('event:');
        console.log('hahahah');
    });

});
